<template>
  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
    <div class="h-full flex-col">
      <BreadCrumb class="mx-12 mt-12" />
      <slot name="action" />
      <transition name="fade-slide" mode="out-in" appear>
        <div v-if="slots.custom" class="cus-scroll m-12 h-0 flex-1 overflow-scroll">
          <slot name="custom" />
        </div>
        <AppCard v-else class="cus-scroll m-12 h-0 flex-1 overflow-scroll rounded-8 p-24" bordered>
          <slot />
        </AppCard>
      </transition>
    </div>
  </main>
</template>

<script setup>
import { BreadCrumb } from '@/layouts/components'
defineProps({
  back: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
})
const slots = useSlots()
</script>
